<template>
    <div v-show="isDrawerOpen" :class="['drawer', `drawer-${direction}`]" @click.self="isDrawerOpen = false">
        <slot>
            <!-- <div class="drawer-content">

                </div> -->

        </slot>
        <!-- <button @click="isDrawerOpen = false">关闭抽屉</button> -->
    </div>
</template>

<script>
import { ref, inject } from "vue";
export default {

    name: "DrawerComponent",
    props: {
        direction: {
            type: String,
            default: "right", // 默认方向为右
            validator: (value) => ["left", "right", "top", "bottom"].includes(value),
        },
    },

    setup() {

        const isDrawerOpen = ref(false);

        const toggleDrawer = (open) => {
            isDrawerOpen.value = open;
        };

        // 注入父组件提供的方法
        const registerChildMethod = inject('registerChildMethod');
        registerChildMethod(toggleDrawer);
        return {
            isDrawerOpen,
            toggleDrawer
        };
    },
};
</script>

<style scoped>
/* 基础样式 */
.drawer {
    position: fixed;
    z-index: 1000;
    background-color: white;
    /* display: flex; */
    /* justify-content: center; */
    /* align-items: center; */
    width: 30%;
    height: 100%;
    /* top: 30%; */
    border: '1px solid #CFCFCF;';
    /* left: 0; */
    /* right: 0; */
    /* overflow: hidden; */
}

.drawer-content {
    background-color: rgb(193, 40, 40);
    /* padding: 20px; */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* max-width: 90%;
  max-height: 90%; */
    /* width: 100%; */
    /* overflow: auto; */
    /* display: flex; */
}

/* 根据方向调整抽屉的动画和位置 */
.drawer-left {
    /* justify-content: flex-start;
    align-items: flex-start; */
    animation: slideLeft 0.3s forwards;
    left: 0;
}

.drawer-right {
    /* justify-content: flex-end;
    align-items: flex-start; */
    animation: slideRight 0.3s forwards;
    right: 0;
}

.drawer-top {
    justify-content: center;
    align-items: flex-start;
    animation: slideTop 0.3s forwards;
}

.drawer-bottom {
    justify-content: center;
    align-items: flex-end;
    animation: slideBottom 0.3s forwards;
}

/* 动画效果 */
@keyframes slideLeft {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes slideRight {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes slideTop {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes slideBottom {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}
</style>